<template>
  <view :style="tabKey == 'single' ? nbBackground : nbBackgroundImage" style="height:100vh;overflow: hidden;">
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="header-view">
      <!-- #ifndef MP-ALIPAY -->
      <view class="back-view" @click="onBackClick">
        <icon class="back-icon fa fa-lg fa-angle-left"></icon>
      </view>
      <view class="title-view">颜色对比</view>
      <!-- #endif -->
    </view>
    <view class="container">
      <view class="color-value hor-layout-center">
        <view class="color-value-text" :class="{'single':tabKey == 'single'}">{{ currentColor }}</view>
        <view class="copy-button" @click="copyText(currentColor)">复制</view>
      </view>
      <view class="top-tab">
        <view class="tab-view" :class="[{ select: tabKey == 'single' }]" @click="onTabClick('single')">单色</view>
        <view class="tab-view" :class="[{ select: tabKey == 'more' }]" @click="onTabClick('more')">过渡色</view>
      </view>
      <!-- 单色模块 -->
      <view :hidden="tabKey == 'more'">
        <scroll-view scroll-y="true" class="color-list" @scrolltolower="toBottomListener">
          <view class="content-ver">
            <view class="color-container">
              <block v-for="(item, index) in colorArr" :key="index">
                <view class="color-item" :class="index == selectIndex ? 'color-item_sel' : ''" :data-value="item.value"
                      :data-idx="index"
                      @click="onColorItemClick">
                  <view class="color-view" :style="{ background: item.value }"></view>
                  <view class="color-text">{{ item.name }}</view>
                </view>
              </block>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 过渡色布局 -->
      <view :hidden="tabKey=='single'">
        <scroll-view scroll-y class="color-list_more" bindscrolltolower="toBottomListener">
          <view class="content-ver">
            <view class="color-container_more">
              <block v-for="(item,index) in webColorArr" :key="index">
                <view class="color-item" :class="index==selectIndexMore ?'color-item_sel':''"
                      @click="onColorMoreItemClick(item.colorText[0],index)">
                  <view class="color-view_more" :style="item.colorText[0]"></view>
                  <view class="color-text">{{ item.name }}</view>
                </view>
              </block>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  home
} from '@/router.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      singlPage: 0, //单色页码
      morePage: 0, //过渡色页码
      moreLoading: false, //加载更多标识
      hasSingleData: true,
      hasMoreData: true,
      selectIndexMore: 0,
      // 颜色数据
      colorArr: [],
      webColorArr: [],
      selectIndex: 0,
      tabKey: 'single',
      singleColor: '#c1c1c1',
      moreColor: '',
      nbBackground: 'background:#c1c1c1',
      nbBackgroundImage: 'background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);'
    };
  },
  computed: {
    currentColor() {
      if (this.tabKey == 'single') return this.singleColor
      else return this.moreColor
    }
  },
  onLoad(options) {
    this.getSysInfo();
    this.getSingleColor();
    this.getMoreColorData()
  },
  methods: {
    toBottomListener() {

    },
    getSysInfo() {
      uni.getSystemInfo({
        success: res => {
          console.log(res);
          this.statusBarHeight = res.statusBarHeight;
        }
      });
    },
    //返回按钮监听
    onBackClick() {
      const pages = getCurrentPages()
      // console.log("pages"+pages)
      // console.log(home)
      if (pages && pages.length > 1) {
        uni.navigateBack({
          complete: res => {
          }
        });
      } else {
        uni.reLaunch({
          url: home
        })
      }
    },
    // tab标签点击监听
    onTabClick(e) {
      console.log(e)
      this.tabKey = e
    },
    // 单色item点击监听
    onColorItemClick(e) {
      // console.log(e)
      var index = e.currentTarget.dataset.idx
      var value = e.currentTarget.dataset.value
      let nbBackground = `background:${value}`
      console.log(index, value)
      this.selectIndex = index
      this.singleColor = value
      this.nbBackground = nbBackground
    },
    // 过渡色item点击监听
    onColorMoreItemClick(colorText, index) {
      console.log(index, colorText)
      this.nbBackgroundImage = colorText
      this.selectIndexMore = index
      this.moreColor = colorText
    },
    getSingleColor() {
      let singlPage = this.singlPage;
      uniCloud.callFunction({
        name: 'database',
        data: {
          collection: 'devTools',
          title: '中国传统色彩'
        },
        success: res => {
          // console.log('success', res);
          let cList = res.result.data;
          if (cList && cList.length > 0) {
            let colorBeans = cList[0].colorBeans;
            let mColorArr = this.colorArr;
            let colorArr = mColorArr.concat(colorBeans);
            this.colorArr = colorArr;
            this.moreLoading = false;
            this.singlPage = singlPage + 1;
          } else {
            this.hasSingleData = false;
            this.moreLoading = false;
          }
          console.log('colorBeans', this.colorArr);
        },
        fail: err => {
          console.error('err', err1);
        }
      });
    },
    // 获取渐变颜色数据
    getMoreColorData() {
      let morePage = this.morePage
      uniCloud.callFunction({
        name: 'database',
        data: {
          collection: 'devTools',
          title: 'webgradients'
        },
        success: res => {
          console.log("getMoreColorData", res)
          let cList = res.result.data
          if (cList && cList.length > 0) {
            let colorBeans = cList[0].colorBeans;
            let mColorArr = this.webColorArr
            let webColorArr = mColorArr.concat(colorBeans)
            this.webColorArr = webColorArr
            this.moreLoading = false
            this.morePage = morePage + 1

          } else {
            this.hasMoreData = false
            this.moreLoading = false
          }
          console.log('moreColorBeans', this.webColorArr);
        }
      })
    },
    // 复制文字监听
    copyText(text) {
      console.log("copyText", text)
      uni.setClipboardData({
        data: text,
        success: () => {
          console.log("setClipboardData-success")
          uni.showToast({
            title: '复制成功'
          })
        }
      })
    },
  },
};
</script>

<style>
.container {
  padding: 15px;
  padding-top: 0px;
}

.header-view {
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.back-view {
  height: 100%;
  width: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.back-icon {
  color: #161823;
  font-size: 25px;
  margin-left: 10px;
}

.title-view {
  font-size: medium;
  margin: auto;
  padding-right: 44px;
}

.top-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: large;
  height: 40px;
}

.tab-view {
  flex: 1;
  padding: 4px;
  margin: 0px 20px;
  text-align: center;
}

.top-tab > .select {
  border-bottom: 2px solid white;
}

.color-value {
  margin-top: 10px;
  width: calc(100% - 20px);
  height: 38px;
  padding: 10px;
  font-size: 13px;
  margin-bottom: 10px;
  background: white;
  border-radius: 7px;
}

.color-value-text {
  overflow: hidden;
  height: 100%;
  text-overflow: ellipsis;
}

.color-value-text.single {
  height: 50px;
  line-height: 50px;
}

.color-list {
  margin-top: 20px;
  height: calc(100vh - 30px - 44px - 50px - 50px - 30px);
  width: calc(100% - 10px);
  /* 分别减去状态栏高度，标题栏高度，Tab标签高度，Value标签高度，底部内高度 */
  padding: 5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 5px #555;
}

.color-list_more {
  margin-top: 20px;
  height: calc(100vh - 30px - 44px - 50px - 50px - 30px);
  width: calc(100% - 10px);
  padding: 5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 5px #555;
}

.color-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 75px);
  /** 平铺宽度为50px的单元格 */
  grid-template-rows: 75px;
  /** 设置高度为50px */
  grid-auto-rows: 75px;
  /** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */
  justify-content: center;
  /** 水平居中  */
  grid-gap: 5px;
  /** 水平和垂直间距为10rpx*/
}

.color-container_more {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  /** 平铺宽度为50px的单元格 */
  grid-template-rows: 80px;
  /** 设置高度为50px */
  grid-auto-rows: 80px;
  /** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */
  justify-content: center;
  /** 水平居中  */
  grid-gap: 5px;
  /** 水平和垂直间距为10rpx*/
  padding: 5px;
}

.color-item {
  border: 1px solid #e5e4e9;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px 1px #eaeaea;
}

.color-item_sel {
  background: lightgrey;
}

.color-view {
  margin-top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.color-view_more {
  margin-top: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.color-text {
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  width: 93%;
  margin: auto;
  text-overflow: ellipsis;
}

.copy-button {
  flex-shrink: 0;
  margin-left: 5px;
  color: white;
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 5px;
  background: #91c2e8;
}

.loading-view {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
}
</style>
